<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="vehicleId" label="车辆编号" width="180" />
    <el-table-column prop="licensePlate" label="车牌号" width="180" />
    <el-table-column prop="type" label="车辆类型" width="180" />
    <el-table-column prop="name" label="驾驶员" width="160" />
    <!-- <el-table-column prop="drunk_driver" label="酒驾测试" width="160" /> -->
    <el-table-column prop="drunk_driver" label="酒驾测试" width="160">
      <template #default="scope">
        {{ scope.row.drunk_driver || '已通过' }}
      </template>
    </el-table-column>
    <!-- <el-table-column prop="security_verification" label="安全验证" width="160" /> -->
    <el-table-column prop="security_verification" label="安全验证" width="160">
      <template #default="scope">
        {{ scope.row.security_verification || '已通过' }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="getRouteArrange(scope.row.id)">
          线路安排
        </el-button>
        <el-button size="small" type="warning" @click="arrangrFix(scope.row.id)">
          安排维修
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 5]" :size="size"
      :disabled="disabled" :background="background" layout="->, total, sizes, prev, pager, next" :total=total
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <el-dialog v-model="dialogFormVisible" title="线路安排" width="500">
    <el-form :model="form">
      <el-form-item label="车辆编号" :label-width="formLabelWidth">
        <el-input v-model="form.vehicleId" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item label="车牌号" :label-width="formLabelWidth">
        <el-input v-model="form.licensePlate" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item label="驾驶员" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item label="线路列表" :label-width="formLabelWidth">
        <el-select v-model="form.travelRoute" placeholder="请选择驾驶路线">
          <el-option v-for="route in routes" :key="route.id" :label="route.travelRoute" :value="route.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateRoute">
          运行
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus'
import { onMounted, ref, reactive } from 'vue'
import type { ComponentSize } from 'element-plus'
import { under, RouteArrange, updateRouteArrang, ArrangeFix } from '../../api/work.js'
import { travelRoute } from '../../api/service.js'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  licensePlate: '',
  vehicleId: '',
  travelRoute: '',
})


const currentPage4 = ref(1)
const pageSize4 = ref(2)
const total = ref()
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  getUnder();
};

const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  getUnder();
};
const tableData = ref([])


const getUnder = async () => {
  const payload = {
    page: currentPage4.value,
    pageSize: pageSize4.value
  }
  try {
    const result = await under(payload);
    if (result.data.code === 200) {
      tableData.value = result.data.data.recodes;
      total.value = result.data.data.total;
    } else {
      ElMessage.error(result.data.msg ? result.data.msg : '未查询到任何信息');
    }
  } catch (error) {
    ElMessage.error("无法获取")
  }
}


const getRouteArrange = async (id: number) => {
  dialogFormVisible.value = true
  // console.log(id)
  try {
    const result = await RouteArrange(id);
    if (result.data.code === 200) {
      // console.log(result.data.data)
      const data = result.data.data;
      console.log(data)
      Object.assign(form, data)
    } else {
      ElMessage.error("获取失败")
    }
  } catch (error) {
    ElMessage.error("无法获取")
  }
}

const routes = ref([])
const getRoutes = async () => {
  try {
    const result = await travelRoute();
    if (result.data.code === 200) {
      routes.value = result.data.data
    }
  } catch (error) {
    ElMessage.error("路线错误")
  }
}

const updateRoute = async () => {
  try {
    const result = await updateRouteArrang(form);
    if (result.data.code === 200) {
      ElMessage.success("已运行");
      setTimeout(() => {
        dialogFormVisible.value = false
      }, 400)
      getUnder();
    } else {
      ElMessage.error(result.data.msg ? result.data.msg : '无法运行该车辆')
    }
  } catch (error) {
    ElMessage.error('无法运行该车辆')
  }
}

const arrangrFix = async (id: number) => {
  const ids = id;
  try {
    const result = await ArrangeFix(ids);
    if (result.data.code === 200) {
      setTimeout(() => {
        ElMessage.success('前往维修');
        getUnder();
      }, 500);
    } else {
      ElMessage.error('错误')
    }
  } catch (error) {
    ElMessage.error('错误')
  }
}

onMounted(() => {
  setTimeout(() => {
    getUnder(),
      getRoutes();
  }, 100)
})


</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>